﻿@page "/ChartDynamicSeries"
<div class="demo-description">
    <h2>Dynamic Series</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChart-1">Chart</a> allows you select data that matches the specified criterion from a data source and display chart series based on this data.
    </p>
    <p>
        To do this, use the following settings available through the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartCommonSeries-4">DxChartCommonSeries</a> object:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartCommonSeries-4.NameField">NameField</a> – A data field that specifies series names.</li>
        <li>
            <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartCommonSeries-4.AggregationMethod">AggregationMethod</a> – A data aggregation method. You can use any function with the Func&lt;IEnumerable&lt;TValue&gt;, TValue&gt; signature as a value of this setting.
            A static <b>Enumerable.Sum</b> method is used in this demo.
        </li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartCommonSeries-4.ArgumentField">ArgumentField</a> – A data field that specifies series arguments.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartCommonSeries-4.ValueField">ValueField</a> – Specifies a data field that specifies series values.</li>
    </ul>
    <p>
        You can also use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartCommonSeries-4.SeriesTemplate">SeriesTemplate</a> property to specify different templates for specific series types: <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartBarSeries-3">DxChartBarSeries</a>, <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartLineSeries-3">DxChartLineSeries</a>, and other type-specific series objects.
        Note that the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartCommonSeries-4.SeriesTemplate">SeriesTemplate</a> property is used as many times as the number of data groups that match the specified criterion.
    </p>
    <p>
        The following chart displays two series with multiple points. The point labels can overlap each other. The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChart-1.LabelOverlap">LabelOverlap</a> property is set to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.ChartLabelOverlap">ChartLabelOverlap.Hide</a> to hide overlapping labels. You can also set this property to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.ChartLabelOverlap">ChartLabelOverlap.Stack</a> to arrange labels in a stack formation.
    </p>
</div>
<DxChart Data="@chartData"
         LabelOverlap="ChartLabelOverlap.Hide"
         @key="@ThemeName"
         CssClass="mw-1100">
    <DxChartTitle Text="Sales amount, $" />
    <DxChartCommonSeries
            AggregationMethod="Enumerable.Sum"
            NameField="@((SaleInfo s) => s.Date.Year)"
            ArgumentField="@((SaleInfo s) => s.City)"
            ValueField="@((SaleInfo s) => s.Amount)">
        <SeriesTemplate Context="settings">
            @if(settings.GroupKey == 2019) {
                <DxChartLineSeries Name='Last year' Settings="@settings">
                </DxChartLineSeries>
            } else {
                <DxChartBarSeries Settings="@settings">
                    <DxChartSeriesLabel Visible="true"></DxChartSeriesLabel>
                </DxChartBarSeries>
            }
        </SeriesTemplate>
    </DxChartCommonSeries>
</DxChart>
<CodeSnippet_Charts_DynamicSeries />
@code {
    [CascadingParameter(Name = "ThemeName")] string ThemeName { get; set; }
    IEnumerable<SaleInfo> chartData;

    protected override async Task OnInitializedAsync() {
        chartData = await Sales.GetSalesAsync();
    }
}
